import React, { Component,PropTypes } from 'react'
import { TabBar } from '../footer'
import { ProjectTotal, ProjectIntro, ProjectTop, ProjectAlert } from './'
import { Progress, Button, ListView, Modal } from 'antd-mobile'
import { config, myFetch, helper } from '../utils'
import moment from 'moment'
import { hashHistory } from 'react-router'

const alert = Modal.alert

const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    })

export default class ProjectPage extends Component {
  constructor() {
    super()
    this.state = {
      dataSoure: dataSource,
      news: [],
      last: '',
      isLoading: true,
      isEnd: false,
      data: [],
      active: 0,
      num: 0,
    }
    this.rData = []
    this.fetchPageData = this.fetchPageData.bind(this)
    this.onProjectShow = this.onProjectShow.bind(this)
    this.onFetchDetail = this.onFetchDetail.bind(this)
  }
  onFetchDetail(id) {
    if (!sessionStorage.token) {
      hashHistory.push('/login')
      return 
    }
    const options = {
      method: 'POST',
      body: ''
    }
    myFetch(`${config.rootApi}/project/${id}/detail`,options, true)
      .then(rs => {
        this.setState({
          num: rs.value.viewDetailPrice
        })
        this.onProjectShow(id)
      })
      .catch(err => helper.onPromiseError(err))
  }
  onProjectShow(id) {
    const options = {
      method: 'POST',
      body: ''
    }
    myFetch(`${config.rootApi}/project/${id}/viewed`, options, true)
      .then((rs) => {
        if (rs) {
          hashHistory.push({
            pathname: '/project/detail',
            query: {
              id: id
            }
          })
        } else {
        alert('查看项目详情', <ProjectAlert balance={200} num={this.state.num}/>, [
          { text: '否', onPress: () => console.log('cancel') },
          { text: '是', onPress: () => {
            hashHistory.push({
            pathname: '/project/detail',
            query: {
              id: id
            }
          })
          } },
        ])
        }
      })
      .catch(err => {
        helper.onPromiseError(err)
      })
  }
  componentDidMount() {
    this.fetchPageData('ALL')
  }
  fetchPageData(status) {
    const options = {
      method: 'POST',
      body: JSON.stringify({
        pageInfo: {
          page: 0,
          size: 10
        },
        status: status
      })
    }
    myFetch(`${config.rootApi}/project/`, options)
      .then(rs => {
        this.setState({
          data: rs.content
        })
      })
      .catch(err => helper.onPromiseError(err))
  }
  render() {
    const { data, active, num } = this.state
    return (
      <div className="rt-project-page">
        <ProjectTop />
        <div className="-btn-all">
          <Button
            className={active == 0 ? '-btn-active' : ''}
            onClick={
              () => {
                this.setState({
                  data: [],
                  active: 0,
                },() => {
                  this.fetchPageData('ALL')
                })
              }
            }
          >
            全部
          </Button>
          <Button
            className={active == 1 ? '-btn-active' : ''}
            onClick={
              () => {
                this.setState({
                  data: [],
                  active: 1,
                },() => {
                  this.fetchPageData('WARMUP')
                })
              }
            }
          >
            预热
          </Button>
          <Button
            className={active == 2 ? '-btn-active' : ''}
            onClick={
              () => {
                this.setState({
                  data: [],
                  active: 2
                },() => {
                  this.fetchPageData('HOTSALE')
                })
              }
            }
          >
            热销中
          </Button>
          <Button
            className={active == 3 ? '-btn-active' : ''}
            onClick={
              () => {
                this.setState({
                  data: [],
                  active: 3
                },() => {
                  this.fetchPageData('SOLDOUT')
                })
              }
            }
          >
            已销罄
          </Button>
        </div>
        <div className="cm-scrollable-container">
          <ul className="-list">
              return (
                <li className="-item">
                <div className="-item-top">
                  <div className="-item-show">
                    <div className="-left">
                      <img src={require('../../statics/images/pj01.png')} />
                    </div>
                    <div className="-right">
                      <div className="-title">
                        <strong>
                          title
                        </strong>
                        <span>
                          阶段: 
                        </span>
                      </div>
                      <p>description</p>
                      <div className="-price">起投：</div>
                    </div>
                  </div>
                  <div className="-progress">
                    <Progress  position="normal" />
                    <span className="-show"></span>
                  </div>
                </div>
                <div className="-item-bottom">
                  <span
                    className="-btn1"
                    onClick={
                      () => {
                        hashHistory.push({
                          pathname: '/share/project'
                        })
                      }
                    }
                  >
                    <img src={require('../../statics/images/icon_share_s.png')} />
                    <em>分享</em>
                  </span>
                  <span
                    className="-btn2"
                  >
                    查看详情
                  </span>
                </div>
              </li>
          </ul>
        </div>
        <TabBar activeIndex={2} />
      </div>
      )
  }
}